mdn · alkiki · May 29, 2025
@@ -0,0 +1,38 @@
+---
+title: Использование изображений в HTML
+slug: Web/Media/Guides/Images
+l10n:
+  sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
+---
+
+Элемент {{Glossary("HTML")}} {{HTMLElement("img")}} позволяет вставлять изображения в HTML-документ, а {{HTMLElement("picture")}} отвечает за [адаптивные изображения](/ru/docs/Web/HTML/Guides/Responsive_images). В этом руководстве вы найдёте подборку материалов по добавлению изображений на сайты и настройке их форматов.
+
+Эти статьи помогут вам понять, как выбрать и настроить разные типы изображений:
+
+- [Типы и форматы файлов изображений](/ru/docs/Web/Media/Guides/Formats/Image_types)
+  Рассказывает о самых популярных форматах изображений, поддерживаемых браузерами, их особенностях, возможностях и факторах совместимости. Здесь же даны советы по выбору оптимального формата для разных задач.
+- [Зачем указывать `width` и `height`](/ru/docs/Learn_web_development/Extensions/Performance/Multimedia#rendering_strategy_preventing_jank_when_loading_images)
+  Объясняется, как браузер заранее вычисляет {{glossary("aspect ratio", "соотношение сторон")}} изображения и резервирует под него место на странице до полной загрузки.
+
+## Полезные ссылки
+
+### HTML
+
+- {{HTMLElement("img")}}
+  **Тег `<img>`** вставляет изображение на страницу. Он поддерживает множество атрибутов для управления отображением и поведения картинки, включая `alt` для альтернативного текста, важного для доступности.
+- {{HTMLElement("picture")}}
+  **Тег `<picture>`** содержит несколько {{HTMLElement("source")}} и один `<img>`. Браузер последовательно проверяет источники и выбирает наиболее подходящий вариант изображения в зависимости от устройства и условий отображения.
+
+### CSS
+
+- {{cssxref("object-fit")}}
+  Свойство `object-fit` определяет, как содержимое {{glossary("replaced elements", "замещаемых элементов")}} (например, `<img>` или `<video>`) масштабируется внутри своего контейнера.
+- {{cssxref("object-position")}}
+  Свойство `object-position` задаёт выравнивание содержимого замещаемого элемента внутри его области. Пустые участки заполняются фоном контейнера.
+- {{cssxref("background-image")}}
+  С помощью свойства `background-image` задаётся одно или несколько фоновых изображений для элемента.
+
+## См. также
+
+- [Адаптивные изображения](/ru/docs/Web/HTML/Guides/Responsive_images)
+  В этой статье рассказывается о принципах адаптивных изображений: о том, как они подстраиваются под экраны с разными размерами и разрешениями; и о возможностях HTML для их реализации.